<script setup lang=ts>
import {onMounted, reactive, watch,nextTick} from "vue";
import {useRoute, useRouter} from "vue-router";
import jump from 'jump.js'
import {getVersionList} from "@/utils/request";
import {useAppStore} from "@/store/app";
const route=useRoute()
const store=useAppStore()
const router=useRouter()
const tabs = reactive([
  {title: '首页', path: '/home'},
  {title: '鲸喜多多', path: '/jxdd'},
  {title: '案例展示', path: '/case'},
  {title: '资讯中心', path: '/message'},
  {title: '申请入驻', path: '/apply'},
  {title: '招商代理', path: '/attractInvest'},
  {title: '关于我们', path: '/aboutUs'},
])
const vueData = reactive({
  tab: route.path,
  appBarShow: false,
  arrowsShow: false,
  appBarShowBg: route.path!=='/home',
  apkLink:''
})
const init=()=>{
  getVersionList({page:1,page_size:1}).then(res=>{
    vueData.apkLink=res.data.data[0].android_url
    store.app=res.data.data[0]
  })
}
init()
watch(()=>router.currentRoute.value.path,(val,old)=>{
  console.log(val)
  if (val==='/messageInfo'){
    vueData.tab=''
  }else{
    vueData.tab=val
  }
  vueData.appBarShowBg=val!=='/home'
})
onMounted(()=>{
  window.addEventListener('scroll',(e)=>{
    if (window.pageYOffset>300 && vueData.appBarShow){
      vueData.arrowsShow=true
    }else{
      vueData.arrowsShow=false
    }

    if (route.path==='/home'){
      if (window.pageYOffset>300 && vueData.appBarShow){
        vueData.appBarShowBg=true
      }else{
        vueData.appBarShowBg=false
      }
    }
  })
})
const toTop=()=>{
  jump(window.pageYOffset*-1)
}
const tabsChange=(path)=>{
  router.push({path})
}
</script>
<template>
  <div class="position-fixed left-0 top-0 right-0 z-10">
    <v-app-bar :elevation="vueData.appBarShowBg?3:0" v-model="vueData.appBarShow" scroll-behavior="hide"
               :style="{background:vueData.appBarShowBg?'white':'transparent'}">
      <v-row class="px-20px flex-nowrap">
        <v-col offset-xs="0" offset="1" offset-xxl="2" alignSelf="center"
               class="flex justify-space-between align-center">
          <img class="w-150px h-30px" src="@/assets/logo.png">
          <v-spacer></v-spacer>
          <v-tabs :modelValue="vueData.tab" @update:modelValue="tabsChange" align-tabs="end" color="primary">
            <v-tab v-for="(item,index) in tabs" :key="index" class="!text-16px" :class="[vueData.appBarShowBg?'text-black':'text-white']"
                   :value="item.path">{{
                item.title
              }}
            </v-tab>
          </v-tabs>
        </v-col>
        <v-col sm="2" alignSelf="center">
          <v-btn
            class="text-none text-subtitle-1"
            color="#EE5F2E"
            variant="flat"
            @click="$router.push({name:'downAPP'})"
            rounded="xl">
            下载鲸喜多多
          </v-btn>
        </v-col>
      </v-row>
    </v-app-bar>
    <div v-if="vueData.arrowsShow" class="fixed" style="bottom: 10%;right: 3%">
      <v-btn @click="toTop" icon="mdi-chevron-up" color="primary" size="x-large"></v-btn>
    </div>
  </div>
</template>
<style scoped>

</style>
